<template>
  <el-form
    ref="baseFormRef"
    v-column="3"
    :model="formItem"
    :rules="rules"
    label-width="100px"
  >
    <el-form-item label="项目编号:" prop="projectNo">
      <el-input v-model="formItem.projectNo" disabled />
    </el-form-item>

    <el-form-item label="项目名称:" prop="projectName">
      <el-input v-model="formItem.projectName" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="计划发货时间:" prop="planDeliveryTime">
      <el-date-picker
        v-model="formItem.planDeliveryTime"
        type="date"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder="请选择"
        style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="合同数量:" prop="contractQty">
      <el-input-number v-model="formItem.contractQty" :controls="false" placeholder="请输入" />
    </el-form-item>

    <el-form-item label="合同金额:" prop="contractMoney">
      <el-input-number
        v-model="formItem.contractMoney"
        :controls="false"
        :precision="2"
        placeholder="请输入"
      />
    </el-form-item>

    <el-form-item label="预警开关:" prop="warnSwitch">
      <el-switch v-model="formItem.warnSwitch" />
    </el-form-item>

    <el-form-item label="预警方式:" prop="warnType">
      <el-checkbox-group v-model="formItem.warnType">
        <el-checkbox value="短信" name="type">短信</el-checkbox>
        <el-checkbox value="邮件" name="type">邮件</el-checkbox>
        <el-checkbox value="电话" name="type">电话</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="预警通知人:" prop="warnWho">
      <el-radio-group v-model="formItem.warnWho">
        <el-radio value="管理员">管理员</el-radio>
        <el-radio value="监督员">监督员</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="承运商:" prop="carrierName">
      <el-select
        v-model="formItem.carrierName"
        placeholder="请选择"
        style="width: 100%"
        value-key="code"
        @change="selectChangeParent"
      >
        <el-option
          v-for="item in carrierNameOption.list"
          :key="item.value"
          :label="item.label"
          :value="item"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="运输方式:" prop="shippingType">
      <el-select v-model="formItem.shippingType" placeholder="请选择" style="width: 100%">
        <el-option
          v-for="(val, key) in DELIVERY_TYPE"
          :key="key"
          :label="val"
          :value="key"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="备注:" prop="remark">
      <el-input
        v-model="formItem.remark"
        placeholder="请输入"
        :rows="2"
        type="textarea"
      >
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { DELIVERY_TYPE } from '@/utils/config'
import { validate } from '@/utils/validate'

const formItem = reactive({
  projectNo: '',
  projectName: '',
  planDeliveryTime: '',
  planPickupTime: '',
  contractQty: 0,
  contractMoney: 0,
  warnSwitch: false,
  warnType: [],
  warnWho: '',
  carrierName: '',
  carrierCode: '',
  shippingType: '',
  remark: '',
})

const reset = () => {
  baseFormRef.value.resetFields()
}

const rules = reactive({
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  shippingType: [{ required: true, message: '请选择运输方式', trigger: 'change' }],
  warnType: [{ type: 'array', required: true, message: '请选择至少一项预警方式', trigger: 'change' }],
  warnWho: [{ required: true, message: '请选择至少一位员工', trigger: 'change' }],
})

// 验证
const baseFormRef = ref(null)
const baseFormValidate = async () => {
  const flag = await validate(baseFormRef)
  return flag
}

const carrierNameOption = reactive({
  list: [
    { label: '京东', value: '京东', code: '1' },
    { label: '顺丰', value: '顺丰', code: '2' },
    { label: '申通', value: '申通', code: '3' },
  ]
})

const selectChangeParent = (val: any) => {
  // 选中值为对象
  formItem.carrierCode = val.code
  formItem.carrierName = val.value
}

const setData = (v: any) => {
  Object.assign(formItem, v)
}

defineExpose({ formItem, baseFormValidate, reset, setData })

</script>
<style lang="scss" scoped></style>
